<!--
 * @Author: xss 995550359@qq.com
 * @Date: 2024-03-15 15:55:42
 * @LastEditors: xss 995550359@qq.com
 * @LastEditTime: 2024-03-15 16:12:41
 * @FilePath: /study-ui/src/view/home/index.vue
-->
<template>
  <div class="container">
    <div id="map" class="map"></div>
  </div>
</template>
<script setup>
import {  onMounted } from 'vue'
onMounted(() => {
  const map = new AMap.Map('map', {
    resizeEnable: true,
    zoom: 7,
    center: [114.426986, 30.436675]
  })
  console.log(map, 'map')
  // 创建一个 Marker 实例：
  // position为必填参数，设置标记的地理位置
  // title为鼠标悬停时显示的信息
  // 将title设置为当前所在城市
  // 获取当前城市的经纬度
  AMap.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
      timeout: 10000, // 超过10秒后停止定位，默认：无穷大
      maximumAge: 0, // 定位结果缓存0毫秒，默认：0
      convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, // 显示定位按钮，默认：true
      buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：true
    })
    map.addControl(geolocation)
    geolocation.getCurrentPosition(function(status, result) {
      if (status === 'complete') {
        onComplete(result)
      } else {
        onError(result)
      }
    })
  })
  function onComplete(data) {
    console.log(data, 'data')
    var str = []
    str.push('定位结果：' + data.position)
    str.push('定位类别：' + data.location_type)
    if (data.accuracy) {
      str.push('精度：' + data.accuracy + ' 米')
    } // 如为IP精确定位结果则没有精度信息
    str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'))
    console.log(str.join('<br>'))
  }
  function onError(data) {
    console.log('定位失败')
  }
})

</script>
<style scoped lang="less">
.container{
  height: calc(100vh - 142px); // 动态计算高度 100vh是视口高度 - 142px是header的高度 = 除去header的高度
  .map{
    height: 100%;
  }
}
</style>
